<!-- eslint-disable vue/valid-template-root -->
<template>
    <div id="main">
        <!-- 面包屑 -->
        <go-bread :beacklist="beacklist"></go-bread>
        <div class="wrapper">
            <!-- 头部搜索框 -->
            <div class="titleBox">
                <el-row>
                    <el-col :span="6" :offset="0">
                        <el-button type="primary" @click="addCateBtn">添加分类</el-button>
                    </el-col>
                </el-row>
            </div>
            <!-- table表格 -->
            <!-- data数据 必须是树形结构 -->
            <!-- columns 设置属性 -->
            <!-- border边框 -->
            <!-- show-row-hover="false" 高亮显示为false -->
            <!-- selection-type="false 有>箭头，可以展开 -->
            <!-- expand-type="false 有复选框 可以选中 -->
            <tree-table :data="cateList" :columns="defaultProps" :selection-type="false" :expand-type="false"
                index-text="#" :show-row-hover="false" show-index border>
                <!-- 是否有效 -->
                <template slot="isok" slot-scope="scope">
                    <i class="el-icon-success" style="color: lightgreen" v-if="scope.row.cat_deleted === false"></i>
                </template>
                <!-- 排序 -->
                <template slot="sorts" slot-scope="scope">
                    <el-tag :type="typecol[scope.row.cat_level]">{{  scope.row.cat_level | catefilter  }}</el-tag>
                </template>
                <!-- 操作 -->
                <template slot="caozuo" slot-scope="scope">
                    <el-button type="primary" size="mini" @click="editCateBtn(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="delCateBtn(scope.row)">删除</el-button>
                </template>
            </tree-table>
            <!-- 分页器 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[5, 10, 15, 20]" :page-size="this.cateParams.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="this.total">
            </el-pagination>
        </div>
        <!-- 添加分类弹框 -->
        <el-dialog title="添加分类" :visible.sync="addCateDialogflag">
            <el-form :model="addCateList" ref="addCateList">
                <el-form-item label="分类名称" :label-width="formLabelWidth">
                    <el-input v-model="addCateList.cat_name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="父级分类" :label-width="formLabelWidth">
                    <el-cascader ref="cascader" v-model="addCateList.cat_pid" :options="cateOptions"
                        :props="CateDefProps" clearable></el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addCateDialogflag = false">取 消</el-button>
                <el-button type="primary" @click="addCateFn">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 编辑分类弹框 -->
        <el-dialog title="编辑分类" :visible.sync="editCateDialogflag">
            <el-form :model="editCateList" ref="editCateList">
                <el-form-item label="分类名称" :label-width="formLabelWidth">
                    <el-input v-model="editCateList.cat_name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editCateDialogflag = false">取 消</el-button>
                <el-button type="primary" @click="editCateFn">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    
</template>
<script>
// import GoBread from '@/compontent/GoBread'
import { cascaderList, addCatePort, editCatePort, delCatePort } from '@/api/goods'
import { mapGetters } from 'vuex';
import TreeTable from 'vue-table-with-tree-grid'

export default {
    data() {
        return {
            cateList: [],
            formLabelWidth: '120px',
            addCateDialogflag: false,
            addCateList: {  //添加商品分类
                cat_name: '',
                cat_level: 0,
                cat_pid: 0
            },
            cateOptions: [], //商品分类列表
            CateDefProps: {
                label: 'cat_name',
                value: 'cat_id',
                children: 'children',
                checkStrictly: true,
            },
            defaultProps: [
                {
                    label: "分类名称",
                    prop: "cat_name",
                },
                {
                    label: "是否有效",
                    // 表示当前列为模板列
                    type: "template",
                    // 表示当前这一列的模板名称
                    template: "isok",
                },
                {
                    label: "排序",
                    type: "template",
                    template: "sorts",
                },
                {
                    label: "操作",
                    type: "template",
                    template: "caozuo",
                },
            ],
            typecol: ['', 'success', 'warning'],
            cateParams: {
                pagenum: 1,
                pagesize: 5
            },
            total: 0,
            editCateList: {
                cat_name: ''
            },
            editCateDialogflag: false,
            editCateId: 0,
        }
    },
    watch: {},
    components: {
        // eslint-disable-next-line vue/no-unused-components
        TreeTable
    },
    computed: {
        ...mapGetters(['beacklist'])
    },
    created() {
        this.getCateList()
    },
    mounted() { },
    methods: {
        async getCateList() { //获取分类数据
            let res = await cascaderList(this.cateParams)
            if (res) {
                this.cateList = res.data.result
                this.total = res.data.total
            }
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.cateParams.pagesize = val
            this.getCateList()
        },
        handleCurrentChange(val) {
            this.cateParams.pagenum = val
            // console.log(`当前页: ${val}`);
            this.getCateList()
        },
        async addCateBtn() { //添加分类按钮

            this.addCateList.cat_name = '',
                this.addCateList.cat_pid = 0
            let res = await cascaderList()
            this.cateOptions = res.data
            this.addCateDialogflag = true
        },
        async addCateFn() { //添加分类方法

            let leng = this.addCateList.cat_pid.length
            let cat_pid = leng === 0 ? 0 : this.addCateList.cat_pid[leng - 1];
            let cat_level = leng === 0 ? 0 : leng
            console.log(cat_level, cat_pid);
            let data = { cat_name: this.addCateList.cat_name, cat_pid, cat_level }
            let res = await addCatePort(data)
            // console.log(res);
            if (res) {
                this.addCateDialogflag = false
                this.$message.success(res.meta.msg)
                this.getCateList()
            }
        },
        editCateBtn(row) { //编辑分类按钮 
            // console.log(row);
            this.editCateId = row.cat_id
            this.editCateList.cat_name = row.cat_name
            this.editCateDialogflag = true
        },
        async editCateFn() {//编辑分类方法
            let res = await editCatePort(this.editCateId, this.editCateList)
            console.log(res);
            if (res) {
                this.editCateDialogflag = false
                this.$message.success(res.meta.msg)
                this.getCateList()
            }
        },
        async delCateBtn(row) { //删除分类

            let res = await delCatePort(row.cat_id)
            if (res) {
                this.getCateList()
                this.$message.success(res.meta.msg)
            }
        }
    },
    filters: {
        catefilter(v) {
            switch (v) {
                case 0:
                    return '一级'
                case 1:
                    return '二级'
                case 2:
                    return '三级'
                default:
                    return '一级'
            }
        }
    }

}
</script>
<style lang="scss">
#main {
    width: 100%;
    min-width: 1126px;
    height: 100%;
    background: #fff;
}

.wrapper {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 20px;
}

.titleBox {
    width: 100%;

    height: 40px;
    // display: flex;

    .searchBox {
        width: 24.2%;
        box-sizing: border-box;
        padding: 0 10px 0 0;
        margin-right: 10px;
    }
}

.el-cascader-panel {
    height: 400px;
}
</style>